import React, { useEffect, useState } from 'react';
import * as Doms from "@/components/APreviewCom";
import { Empty } from 'antd';
import { useRequest } from 'ahooks';
import { getFetch } from '@/utils/doFetch';
import { mmConversionPx } from '@/utils/transpxmm';


function Headless({ location }) {
    const [data, setdata] = useState();

    useEffect(() => {
        if (window.DATA) {
            // 直接使用 DATA 这个对象赋值
            setdata(window.DATA)
        } else {
            // 还是走调接口的方式，获取preview对象
            getFetch({ url: "/api/template/template_preview", params: location.query }).then(res => {
                setdata(res?.data ?? [])
            })
        }
    }, [])


    const { dataindex, pdfindex, pageindex } = location.query;

    return (
        <div>
            {
                data ? data?.filter((its, i) => (i + 1).toString() == dataindex).map?.((item) => {
                    return item?.data ? item?.data?.filter((its, i) => (i + 1).toString() == pdfindex).map((its, i) => {
                        return <div
                            className='pdf'
                            key={i}
                            style={{
                                backgroundColor: "#f0f0f0",
                                width: "100%",
                                flexDirection: "column",
                                display: "flex",
                                justifyContent: "center",
                            }}>
                            {
                                its?.pages && its?.pages?.filter((its, i) => (i + 1).toString() == pageindex).map((it, index) => {
                                    const { backgroundColor, width, height, components, unit } = it;
                                    let realw, realh, zoom = 1;
                                    if (unit == "mm") {
                                        realw = mmConversionPx(width);
                                        realh = mmConversionPx(height);
                                    } else {
                                        realw = width;
                                        realh = height;
                                    }

                                    return <div className='avoid' key={index} style={{ width: realw, height: realh, position: "relative" }}>
                                        <div style={{ backgroundColor, width: realw, height: realh, position: "relative", overflow: "hidden" }} key={it.id}>
                                            <div style={{ transform: `translateZ(0) scale(${zoom})`, transformOrigin: "left top" }}>
                                                {
                                                    components.map((item, i) => {
                                                        return React.createElement(Doms[item.type], { ...item, key: i });
                                                    })
                                                }
                                            </div>
                                        </div>
                                    </div>
                                })
                            }
                        </div>
                    }) : null
                }) : <Empty description="没有模板" />
            }

        </div>
    );
}

export default Headless;

